<template>
  <header class="layout-flex-justify-content_space-between flex-middle-x" :style="{borderBottom:borderBottom}">
    <div class="leftItem flex-middle-x overText" @click="skipBack">
      <slot v-if="showLeft" name="left"></slot>
      <img v-else
           :src="leftImg">
    </div>
    <div class="centerItem layout-flex_1 layout-flex-center ">
      <slot v-if="showCenter" name="center"></slot>
      <span class="color-1" style="font-size:0.36rem;">
        {{title}}
      </span>
    </div>
    <div class="rightItem">
      <slot v-if="showRight" name="right">
        <span @click="historyHome" style="font-size:0.24rem;color:#e42f46;">
          {{titleRight}}
        </span>
      </slot>
      <span v-else>
        <span v-if="shippingAddress" @click="increaseBack">新增</span>
        <span class="empty" v-if="ticketDirection" @click="increaseBack">使用流程</span>
        <span class="empty" v-if="DialEmpty" @click="increaseBack">清空</span>
        <span class="dial" v-if="ICBCDial" :src="explainImg " alt="" @click="increaseBack">活动说明</span>
        <img v-if="explain" :src="explainImg " alt="" @click="increaseBack">
        <img v-if="enshrine" :src="collect" alt="" @click="actionCollect">
        <img v-if="sharing" :src="collect" alt="" @click="actionSharing">
      </span>
    </div>
  </header>
</template>
<script>
  export default {
    name: '',
    data() {
      return {};
    },
    render() {

    },
    props: {
      leftImgType: {
        default: 0
      },
      showLeft: {
        default: false
      },
      showRight: {
        default: true
      },
      showCenter: {
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      titleRight: {
        type: String,
        default: ''
      },
      leftTitle: {
        type: String,
        default: ''
      },
      leftCallback: {
        type: Function
      },
      increaseCallback: {
        type: Function
      },
      collect: {
        type: String,
        default: require('../assets/icons/widget/collect.png')
      },
      explainImg: {
        type: String,
        default: require('../assets/icons/widget/explain.png')
      },
      borderBottom: {
        type: String,
        default: '1px solid #dddddd'
      },
      shippingAddress: {
        default: false
      },
      DialEmpty: {
        default: false
      },
      explain: {
        default: false
      },
      ICBCDial: {
        default: false
      },
      enshrine: {
        default: false
      },
      sharing: {
        default: false
      },
      ticketDirection: {
        default: false
      }
    },
    computed: {
      leftImg: function () {
        if (this.leftImgType === 0) {
          return require('../assets/icons/widget/navigator-left-black.png');
        }
        if (this.leftImgType === 1) {
          return require('../assets/icons/widget/navigator-left-red.png');
        }
        if (this.leftImgType === 2) {
          return require('../assets/icons/widget/navigator-left-white.png');
        }
      }
    },
    components: {},
    methods: {
      skipBack: function () {
        if (this.leftCallback) {
          this.leftCallback();
        } else {
          window.history.back();
        }
      },
      increaseBack: function () {
        this.increaseCallback();
      },
      historyHome: function () {
        this.$router.push('/');
      },
      actionCollect: function () {
        this.$emit('collectType');
      },
      actionSharing: function () {
        this.$emit('actionSharing');
      }
    },
    mounted: function () {
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    height: 0.88rem;
    background-color: $color-4;
  }

  .leftItem {
    height: 100%;
    width: 0.4rem;
    line-height: 0.88rem;
    text-align: center;
    margin-left: 0.3rem;
    img {
      width: 0.2rem;
    }
  }

  .centerItem {
    height: 100%;
    line-height: 0.88rem;
    text-align: center;
    font-size: 18px;
    color: #333333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rightItem {
    height: 0.88rem;
    line-height: 1.05rem;
    margin-right: 0.3rem;
  }

  .rightItem > span > span {
    font-size: 0.3rem;
    color: $color-2;
    position: relative;
    top:-0.07rem;
  }
  .rightItem > span > .dial {
    font-size: 0.3rem;
    color: $color-icbcRed;
    position: relative;
    top:-0.07rem;
  }
  .rightItem > span > .empty {
    font-size: 0.3rem;
    color: $color-icbcRed;
    position: relative;
    top:-0.07rem;
  }

  .rightItem > span > img {
    width: 0.4rem;
  }

  .overText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
